<template>
	<view>
		<view class="search-area" style="margin: 10px;">
			<uv-search placeholder="请输入搜索内容" v-model="keyword" bgColor="#fff"></uv-search>
		</view>
		<view class="tabs">
			<uv-tabs :list="list" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
			    	}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></uv-tabs>
		</view>
		<view class="content">
			<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData"
				:collection="collection" :field="field" @load="load">
				<!-- 基于 uni-list 的页面布局 -->
				<uni-list>
					<uni-list-item direction="column" v-for="item in data" :key="item.id"
						:to="'./news_content?id='+item._id+'&title='+item.title">
						<template v-slot:header>
							<view class="title"
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
								<view class="uni-title">{{item.title}}</view>
								<view class="content-class">
									{{item.category_id[0].name}}
								</view>
							</view>
						</template>
						<template v-slot:body>
							<view class="uni-thumb uni-content list-picture">
								<image v-if="item&&item.avatar_file&&item.avatar_file.path" :src="item.avatar_file.path"
									mode="aspectFill">
								</image>
							</view>
						</template>
						<template v-slot:footer>
							<view class="uni-footer">
								<text class="uni-footer-text"></text>
								<text class="uni-footer-text">发布时间：{{timestampToDateString(item.publish_date)}}</text>
							</view>
						</template>
					</uni-list-item>
				</uni-list>
				<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
			</unicloud-db>
		</view>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				keyword: '',
				list: [{
					name: '关注'
				}, {
					name: '推荐'
				}],
				// 数据表名
				collection: 'opendb-news-articles,opendb-news-categories',
				// 查询字段，多个字段用 , 分割
				field: '_id,mode,avatar_file,title,user_name,excerpt,publish_date,category_id',
				formData: {
					status: 'loading' // 加载状态
				},
				tipShow: false // 是否显示顶部提示框
			};
		},
		onLoad() {},
		methods: {
			timestampToDateString(timestamp) {
				var date = new Date(timestamp);
				// 使用 Date 对象的方法获取年、月、日等信息
				var year = date.getFullYear();
				var month = date.getMonth() + 1; // 月份是从 0 开始的，所以需要加 1
				var day = date.getDate();
				// 将其格式化为想要的字符串格式
				var dateString = year + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
				return dateString;
			},
			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
			}
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.formData.status = 'more'
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				this.tipShow = true
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.tipShow = false
				}, 1000)
				uni.stopPullDownRefresh()
			})
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.$refs.udb.loadMore()
		}
	};
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	/* 页面基本样式 */
	.view {
		// padding: 10px;
		background-color: #F0F2F5;
		/* 轻灰色背景 */
	}

	/* 顶部提示框样式 */
	.tips {
		text-align: center;
		// padding: 10px 0;
		background-color: #FFD700;
		/* 金色背景 */
		color: #FFFFFF;
		/* 白色文字 */
		font-size: 14px;
	}

	/* 提示框显示隐藏动画 */
	.tips-ani {
		animation: slideDown 0.5s ease-out;
	}

	@keyframes slideDown {
		0% {
			transform: translateY(-100%);
			opacity: 0;
		}

		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	/* 新闻列表样式 */
	.uni-list {
		// margin-top: 10px;
	}

	.uni-list-item {
		background-color: #FFFFFF;
		/* 白色背景 */
		margin-bottom: 10px;
		border-radius: 8px;
		/* 圆角边框 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 轻微阴影效果 */
		overflow: hidden;
		/* 隐藏超出内容 */
	}

	.title {
		font-size: 16px;
		color: #333;
		/* 深灰色文字 */
		padding: 10px;
	}

	.content-class {
		font-size: 14px;
		color: #666;
		/* 中灰色文字 */
	}

	.uni-thumb {
		width: 100%;
		height: 200px;
		/* 图片高度 */
	}

	.list-picture image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 保持图片宽高比 */
	}

	.uni-footer {
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}

	.uni-footer-text {
		font-size: 14px;
		color: #999;
		/* 浅灰色文字 */
	}


	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {

	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>